<template>
  <div class="family-info-section">
    <!-- 模块标题 -->
    <div class="section-header">
      <div class="header-left">
        <el-icon class="section-icon"><House /></el-icon>
        <h3 class="section-title">家庭社交信息</h3>
        <el-tag v-if="completionPercentage < 100" type="info" size="small">
          完成度 {{ completionPercentage }}%
        </el-tag>
        <el-tag v-else type="success" size="small">
          <el-icon><CircleCheck /></el-icon>
          已完成
        </el-tag>
      </div>
      <div class="header-right">
        <el-tooltip content="家庭信息有助于了解客户的出行决策模式和偏好">
          <el-icon class="info-icon"><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>

    <!-- 家庭社交信息表单 -->
    <div class="section-content">
      <!-- 家庭结构信息区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><UserFilled /></el-icon>
          <span>家庭结构信息</span>
          <span class="optional-mark">可选填写</span>
        </div>
        
        <el-form 
          ref="familyStructureRef"
          :model="formData"
          label-width="120px"
          label-position="left"
          class="family-structure-form"
        >
          <el-row :gutter="24">
            <!-- 婚姻状况 -->
            <el-col :span="12">
              <el-form-item label="婚姻状况">
                <el-radio-group v-model="formData.maritalStatus">
                    <el-radio value="已婚">已婚</el-radio>
                    <el-radio value="丧偶">丧偶</el-radio>
                    <el-radio value="离异">离异</el-radio>
                    <el-radio value="未婚">未婚</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 配偶信息（已婚时显示） -->
          <div v-if="formData.maritalStatus === '已婚'" class="spouse-section">
            <div class="subsection-title">
              <el-icon><Heart /></el-icon>
              <span>配偶信息</span>
            </div>
            
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="配偶姓名">
                  <el-input 
                    v-model="formData.spouseInfo.spouseName"
                    placeholder="请输入配偶姓名"
                    maxlength="10"
                  >
                    <template #prefix>
                      <el-icon><Avatar /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="配偶电话">
                  <el-input 
                    v-model="formData.spouseInfo.spousePhone"
                    placeholder="请输入配偶电话"
                    maxlength="11"
                  >
                    <template #prefix>
                      <el-icon><Phone /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="配偶年龄">
                  <el-input-number 
                    v-model="formData.spouseInfo.spouseAge"
                    :min="18"
                    :max="120"
                    placeholder="年龄"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否同行">
                  <el-radio-group v-model="formData.spouseInfo.spouseTravelTogether">
                    <el-radio value="经常同行">经常同行</el-radio>
                    <el-radio value="偶尔同行">偶尔同行</el-radio>
                    <el-radio value="从不同行">从不同行</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 子女信息 -->
          <div class="children-section">
            <div class="subsection-title">
              <el-icon><User /></el-icon>
              <span>子女信息</span>
              <el-button 
                type="primary" 
                size="small" 
                text 
                @click="addChild"
                class="add-button"
              >
                <el-icon><Plus /></el-icon>
                添加子女
              </el-button>
            </div>
            
            <div v-if="formData.childrenInfo.length === 0" class="empty-children">
              <el-empty 
                description="暂无子女信息" 
                :image-size="80"
              >
                <el-button type="primary" @click="addChild">添加子女信息</el-button>
              </el-empty>
            </div>

            <div v-else class="children-list">
              <div 
                v-for="(child, index) in formData.childrenInfo" 
                :key="index"
                class="child-item"
              >
                <div class="child-header">
                  <span class="child-title">子女 {{ index + 1 }}</span>
                  <el-button 
                    type="danger" 
                    size="small" 
                    text 
                    @click="removeChild(index)"
                  >
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
                
                <el-row :gutter="16">
                  <el-col :span="8">
                    <el-form-item label="姓名">
                      <el-input 
                        v-model="child.childName"
                        placeholder="请输入子女姓名"
                        maxlength="10"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="电话">
                      <el-input 
                        v-model="child.childPhone"
                        placeholder="请输入子女电话"
                        maxlength="11"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="亲密程度">
                      <el-select v-model="child.intimacyLevel" placeholder="选择亲密程度">
                        <el-option label="关系密切" value="关系密切">
                          <div class="intimacy-option">
                            <el-icon color="#34C759"><Heart /></el-icon>
                            关系密切
                          </div>
                        </el-option>
                        <el-option label="关系一般" value="关系一般">
                          <div class="intimacy-option">
                            <el-icon color="#FFCC00"><User /></el-icon>
                            关系一般
                          </div>
                        </el-option>
                        <el-option label="关系疏远" value="关系疏远">
                          <div class="intimacy-option">
                            <el-icon color="#8E8E93"><Minus /></el-icon>
                            关系疏远
                          </div>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="对旅游态度">
                      <el-radio-group v-model="child.travelAttitude">
                        <el-radio value="支持">支持</el-radio>
                        <el-radio value="中立">中立</el-radio>
                        <el-radio value="反对">反对</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-form>
      </div>

      <!-- 决策模式分析区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><DataAnalysis /></el-icon>
          <span>决策模式分析</span>
          <span class="required-mark">建议填写</span>
        </div>
        
        <el-form 
          ref="decisionModeRef"
          :model="formData.decision"
          label-width="120px"
          label-position="left"
          class="decision-mode-form"
        >
          <el-row :gutter="24">
            <!-- 决策特点 -->
            <el-col :span="24">
              <el-form-item label="决策特点">
                <el-radio-group v-model="formData.decision.decisionPattern">
                    <el-radio value="自主决策">自主决策</el-radio>
                    <el-radio value="咨询决策">咨询决策</el-radio>
                    <el-radio value="共同决策">共同决策</el-radio>
                    <el-radio value="代为决策">代为决策</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!-- 影响因素 -->
            <el-col :span="24">
              <el-form-item label="影响因素">
                <el-checkbox-group v-model="formData.decision.influenceFactors">
                  <el-checkbox value="价格因素">价格因素</el-checkbox>
                  <el-checkbox value="安全因素">安全因素</el-checkbox>
                  <el-checkbox value="健康因素">健康因素</el-checkbox>
                  <el-checkbox value="家人意见">家人意见</el-checkbox>
                  <el-checkbox value="朋友推荐">朋友推荐</el-checkbox>
                  <el-checkbox value="服务质量">服务质量</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 家庭分析总结 -->
      <div class="info-block" v-if="familyAnalysis">
        <div class="block-title">
          <el-icon><Star /></el-icon>
          <span>家庭分析总结</span>
        </div>
        
        <div class="family-analysis">
          <el-card shadow="never" class="analysis-card">
            <div class="analysis-content">
              <div class="analysis-item">
                <h4>家庭结构特点：</h4>
                <p>{{ familyAnalysis.familyStructure }}</p>
              </div>
              
              <div class="analysis-item" v-if="familyAnalysis.decisionStyle">
                <h4>决策风格：</h4>
                <p>{{ familyAnalysis.decisionStyle }}</p>
              </div>
              
              <div class="analysis-item" v-if="familyAnalysis.recommendations.length > 0">
                <h4>服务建议：</h4>
                <ul class="recommendation-list">
                  <li v-for="(rec, index) in familyAnalysis.recommendations" :key="index">
                    {{ rec }}
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  House, CircleCheck, QuestionFilled, UserFilled, User as Heart, User, 
  Minus, User as Avatar, Phone, Plus, Delete, DataAnalysis,
  ChatDotRound, Money, Lock, FirstAidKit, Star, Close
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['validation-change'])

// 表单引用
const familyStructureRef = ref()
const decisionModeRef = ref()

// 完成度计算
const completionPercentage = computed(() => {
  const fields = [
    props.formData.maritalStatus,
    props.formData.decision?.decisionPattern,
    props.formData.decision?.influenceFactors?.length > 0
  ]
  
  // 如果已婚，配偶信息也计入完成度
  if (props.formData.maritalStatus === '已婚') {
    fields.push(
      props.formData.spouseInfo?.spouseName,
      props.formData.spouseInfo?.spouseTravelTogether
    )
  }
  
  const filledFields = fields.filter(field => field).length
  return Math.round((filledFields / fields.length) * 100)
})

// 家庭分析总结
const familyAnalysis = computed(() => {
  if (!props.formData.maritalStatus) return null
  
  const analysis = {
    familyStructure: '',
    decisionStyle: '',
    recommendations: []
  }
  
  // 分析家庭结构
  switch (props.formData.maritalStatus) {
    case '已婚':
      if (props.formData.spouseInfo?.spouseTravelTogether === '经常同行') {
        analysis.familyStructure = '已婚家庭，配偶经常同行，属于夫妻共同出行型客户。'
        analysis.recommendations.push('推荐双人房、情侣套餐等产品')
        analysis.recommendations.push('关注夫妻双方的偏好和需求')
      } else if (props.formData.spouseInfo?.spouseTravelTogether === '偶尔同行') {
        analysis.familyStructure = '已婚家庭，配偶偶尔同行，属于半独立出行型客户。'
        analysis.recommendations.push('可提供灵活的同行选择')
      } else {
        analysis.familyStructure = '已婚家庭，配偶不同行，属于独立出行型客户。'
        analysis.recommendations.push('注重个人体验和安全保障')
      }
      break
      
    case '丧偶':
      analysis.familyStructure = '丧偶家庭，可能需要更多的情感关怀和安全感。'
      analysis.recommendations.push('提供贴心的服务和关怀')
      analysis.recommendations.push('推荐团体旅游，增加社交机会')
      break
      
    case '离异':
      analysis.familyStructure = '离异家庭，注重个人自由和新的生活体验。'
      analysis.recommendations.push('推荐能带来新鲜感的旅游产品')
      break
      
    case '未婚':
      analysis.familyStructure = '单身客户，追求自由和个性化体验。'
      analysis.recommendations.push('提供灵活自由的行程安排')
      break
  }
  
  // 分析决策风格
  switch (props.formData.decision?.decisionPattern) {
    case '自主决策':
      analysis.decisionStyle = '客户具有独立的决策能力，可以直接与客户沟通确定方案。'
      analysis.recommendations.push('直接向客户推荐产品，决策效率高')
      break
      
    case '咨询决策':
      analysis.decisionStyle = '客户会咨询家人意见但自主决定，需要提供充分的信息支持。'
      analysis.recommendations.push('提供详细的产品信息供客户参考')
      analysis.recommendations.push('给客户充分的考虑时间')
      break
      
    case '共同决策':
      analysis.decisionStyle = '客户需要与家人共同决策，沟通过程可能较长。'
      analysis.recommendations.push('与客户家人建立良好沟通')
      analysis.recommendations.push('提供家庽成员都满意的方案')
      break
      
    case '代为决策':
      analysis.decisionStyle = '家人代为决策，需要重点沟通决策者的需求。'
      analysis.recommendations.push('识别真正的决策者并重点沟通')
      analysis.recommendations.push('关注决策者对客户的关爱需求')
      break
  }
  
  // 根据影响因素添加建议
  const factors = props.formData.decision?.influenceFactors || []
  
  if (factors.includes('价格因素')) {
    analysis.recommendations.push('重点强调产品的性价比优势')
  }
  
  if (factors.includes('安全因素')) {
    analysis.recommendations.push('详细介绍安全保障措施')
  }
  
  if (factors.includes('健康因素')) {
    analysis.recommendations.push('推荐适合客户健康状况的产品')
  }
  
  if (factors.includes('朋友推荐')) {
    analysis.recommendations.push('收集和展示客户好评和推荐')
  }
  
  return analysis
})

// 添加子女
const addChild = () => {
  props.formData.childrenInfo.push({
    childName: '',
    childPhone: '',
    intimacyLevel: '',
    travelAttitude: ''
  })
}

// 删除子女
const removeChild = (index) => {
  props.formData.childrenInfo.splice(index, 1)
  ElMessage.success('已删除子女信息')
}

// 初始化表单数据结构
if (!props.formData.spouseInfo) {
  props.formData.spouseInfo = {
    spouseName: '',
    spousePhone: '',
    spouseAge: null,
    spouseTravelTogether: ''
  }
}

if (!props.formData.childrenInfo) {
  props.formData.childrenInfo = []
}

if (!props.formData.decision) {
  props.formData.decision = {
    decisionPattern: '',
    influenceFactors: []
  }
}
</script>

<style lang="scss" scoped>
.family-info-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E5EA;
    background: #FFF8F0;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .section-icon {
        font-size: 20px;
        color: #FF9500;
      }
      
      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin: 0;
      }
    }
    
    .header-right {
      .info-icon {
        font-size: 16px;
        color: #8E8E93;
        cursor: help;
      }
    }
  }
  
  .section-content {
    padding: 24px;
  }
  
  .info-block {
    margin-bottom: 32px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .block-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 18px;
        color: #FF9500;
      }
      
      .required-mark {
        background: #FF9500;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: auto;
      }
      
      .optional-mark {
        background: #5AC8FA;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: auto;
      }
    }
  }
  
  .full-width {
    width: 100%;
  }
  
  
  // 子标题样式
  .subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E5EA;
    font-size: 14px;
    font-weight: 600;
    color: #3C3C43;
    
    .el-icon {
      font-size: 16px;
      color: #FF9500;
    }
    
    .add-button {
      margin-left: auto;
    }
  }
  
  // 配偶信息样式
  .spouse-section {
    margin-bottom: 24px;
    padding: 16px;
    background: #FFF8F0;
    border-radius: 8px;
    border: 1px solid #FFE0B3;
  }
  
  // 子女信息样式
  .children-section {
    margin-bottom: 24px;
    
    .empty-children {
      text-align: center;
      padding: 20px;
    }
    
    .children-list {
      .child-item {
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid #E5E5EA;
        border-radius: 8px;
        background: #FAFAFA;
        
        .child-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          
          .child-title {
            font-weight: 600;
            color: #3C3C43;
          }
        }
      }
    }
  }
  
  .intimacy-option {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  
  
  // 家庭分析总结样式
  .family-analysis {
    .analysis-card {
      border: 1px solid #E5E5EA;
      
      .analysis-content {
        .analysis-item {
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          h4 {
            color: #3C3C43;
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: 600;
          }
          
          p {
            color: #3C3C43;
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
          }
          
          .recommendation-list {
            list-style: none;
            padding: 0;
            margin: 0;
            
            li {
              padding: 4px 0;
              font-size: 14px;
              color: #3C3C43;
              position: relative;
              padding-left: 16px;
              line-height: 1.5;
              
              &:before {
                content: '•';
                color: #FF9500;
                position: absolute;
                left: 0;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .family-info-section {
    .section-content {
      padding: 16px;
    }
    
    
  }
}
</style>